import { BrowserRouter, Route, Routes } from "react-router-dom";
import { useMediaQuery } from "@mui/material";

import PopUp from "../PopUp/PopUp.js";
import MainPage from "../../pages/MainPage.js";

const App = () => {
  const isMobile = useMediaQuery("(max-width:768px)");

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<MainPage />} />
        <Route
          path="/image/:id"
          element={isMobile ? <PopUp isFullScreen={true}/> : <PopUp />}
        />
      </Routes>
    </BrowserRouter>
  );
};

export default App;
